<template>
  <div>
      <h3>用户信息</h3>
      <!-- 使用 element plus 提供的 Layout 布局 -->
      <el-row :gutter="10">
          <el-col v-bind:span="4" class="label">id</el-col>
          <el-col v-bind:span="20" >{{ $route.query.id || $route.params.id }}</el-col>
      </el-row>
      <el-row :gutter="10">
          <el-col :span="4" class="label">name</el-col>
          <el-col :span="20" >{{ $route.query.name || $route.params.name }}</el-col>
      </el-row>
      <hr>
      <el-row :gutter="10">
          <el-col :span="4" class="label">id</el-col>
          <el-col :span="8" >{{ id }}</el-col>
          <el-col :span="4" class="label">name</el-col>
          <el-col :span="8" >{{ name }}</el-col>
      </el-row>
  </div>
</template>

<script>
export default {
    name: 'User' ,
    data(){
        return { id: null , name: null }
    },
    created(){
        let source = () => this.$route.params ;
        let callback = (value,old)=>{
            console.log( 'old: ' , old , 'new: ' , value );
            this.id = value.id ;
            this.name = value.name ;
        }
        this.$watch( source , callback );
    }
}
</script>

<style scoped>
.label {
    text-align: right ;
}
</style>